let allData = []; // 全部数据缓存
// 读取 JSON 文件并生成内容
fetch('../sources/data.json')
    .then(response => response.json())
    .then(data => {
        allData = data;


    })
    .catch(error => {
        console.error('加载 JSON 数据失败:', error);
    });


document.querySelectorAll('.pro-ch-list-item').forEach(item => {
    item.addEventListener('click', (e) => {
        select(e, item);
    });
    item.addEventListener('mouseenter', (e) => {
        select(e, item);
    });
});

function select(e, item) {
    // 阻止 a 标签默认跳转行为（可选）
    e.preventDefault();

    // 先移除所有选中状态
    document.querySelectorAll('.pro-ch-list-item').forEach(el => {
        el.classList.remove('selected');
    });
    // 当前点击的加上 selected 类
    item.classList.add('selected');

    // 获取 tag
    const tag = item.querySelector('span').getAttribute('tag');
    console.log(`===========> ${tag}`);
    const filtered = allData.filter(i => i.tag.includes(tag));
    renderGrid(filtered);
}

// 渲染 grid 内容
function renderGrid(data) {

    const grid = document.getElementById('grid');
    grid.innerHTML = ''; // 清空原内容
    data.forEach(item => {
        const a = document.createElement('a');
        a.className = 'grid-item';
        a.href = item.url;
        a.target = '_blank';
        a.innerHTML = `
      <img src="../sources/product/${item.image}" alt="${item.title}">
      <div class="content">
        <div class="title">${item.title}</div>
        <div class="description">${item.description}</div>
      </div>
    `;
        grid.appendChild(a);
    });
}